import Vue from 'vue';
import AreaSelector from './KsAreaSelector.vue';

const createElement = (marker, tag) => {
  const el = document.createElement(tag || 'div');
  el.setAttribute(marker, '');
  document.body.appendChild(el);
};

class KsAreaSelector {
  constructor() {
    this._vm = undefined;
  }

  show(defaultAreas) {
    createElement('ks-area-selector');

    this._vm = new Vue(AreaSelector);
    this._vm.$mount('[ks-area-selector]');

    setTimeout(() => {
      this._vm.show(defaultAreas);
    });

    return new Promise((resolve, reject) => {
      this._vm.$once('submit', resolve);
      this._vm.$once('hidden', resolve);
    });
  }

  hide() {
    if (this._vm) {
      this._vm.hide();
    }
  }
}

export default new KsAreaSelector();
